<template>
  <div>
    <h3>transition: transform 0.5s ease-in-out 0.2s; /* 属性 | 持续时间 | 速度曲线 | 延迟 */</h3>

    <div class="aside">
      <div class="box">
        <ul>
          <li>
            <router-link to="/transition/fade" active-class="active-link">
              fade(逐渐消失)
            </router-link>
          </li>
          <li>
            <router-link to="/transition/slide" active-class="active-link">slide(滑动)</router-link>
          </li>
          <li>
            <router-link to="/transition/demo" active-class="active-link">deom(示例)</router-link>
          </li>
        </ul>
      </div>

      <!-- 展示 -->
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  name: 'transitionView',
}
</script>

<style lang="scss" scoped>
@import '../style.css';
</style>
